<template>
  <div>
    <h1>子品类管理{{ id }}</h1>
    <template>
      <el-table :data="classificationlista" style="width: 100%">
        <el-table-column prop="id" label="子品类id"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row.id)">修改名称</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 修改名称对话框 -->
    <el-dialog title="修改名称" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="名称">
          <el-input autocomplete="off" v-model="editname"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editnamea">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { classification ,editname} from "../../../http/http";

export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      id: "",
      classificationlista: [],
      dialogFormVisible: false,
      editname: "",
      id: "",
      ida:""
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.id = this.$route.params.id;
    this.a();
  },
  methods: {
    // 二级菜单点击只后获取二级品类
    async a() {
      const { data: res } = await classification(this.id);
      this.classificationlista = res.data;
      console.log(res);
    },
    // 打开对话框
    edit(id) {
      this.dialogFormVisible = true;
      console.log(id);
      this.ida = id;
    },
    // 修改名称
    async editnamea() {
      const { data: res } = await editname({
        categoryId: this.ida,
        categoryName: this.editname,
      });
      this.dialogFormVisible = false;
      this.a()
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
